<template>
     <div class="useract hotword" id="local"></div>
</template>
<script>
var echarts=require("echarts");
import 'echarts/lib/chart/map';
import 'echarts/map/js/china.js';
export default {
  data(){
    return{
       chart: null,
    }
  },
  created:function(){
    this.$nextTick(() => {
      this.drawloc('local')
    })
  },
  methods:{
    drawloc(id){
      this.chart = echarts.init(document.getElementById(id))
      this.chart.setOption({
          title: {
            text: '网名参与度地域分布热力图',
            left: 'left'
        },
        tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function (params) {
                var value = (params.value + '').split('.');
                value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                return params.seriesName + '<br/>' + params.name + ': ' + value;
            }
        },
        visualMap: {
            left: 'left',

            min: 500000,
            max: 38000000,
            inRange: {
                color: ['#5AF2CC','#5BD3DE','#85A3EE']
            },
            text:['High','Low'],           // 文本，默认为数值文本
            calculable: true
        },
        toolbox: {
            show: true,
            //orient: 'vertical',
            left: 'right',
            top: 'top',
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                type: 'map',
                roam: true,
                map: 'china',
                itemStyle:{
                    emphasis:{label:{show:true}}
                },
                // 文本位置修正
                textFixed: {
                    Alaska: [20, -20]
                }
            }
        ]


      })
    }
  }
}
</script>
<style>
.hotword{width:100%;height:500px;}
</style>